<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局域网点对点通信</title>
</head>
<body>
    <h1>局域网点对点通信</h1>
    <div>
        <textarea id="log" rows="10" cols="50" readonly></textarea><br>
        <input type="text" id="message" placeholder="输入消息">
        <button onclick="sendMessage()">发送消息</button>
    </div>
    <hr>
    <div>
        <h3>信令交换</h3>
        <textarea id="localSDP" rows="5" cols="50" placeholder="本地 SDP"></textarea><br>
        <button onclick="copySDP()">复制 SDP</button>
        <textarea id="remoteSDP" rows="5" cols="50" placeholder="输入对方 SDP"></textarea><br>
        <button onclick="setRemoteSDP()">设置远程 SDP</button>
        <textarea id="iceCandidate" rows="2" cols="50" placeholder="输入对方 ICE 候选者"></textarea><br>
        <button onclick="addRemoteCandidate()">添加候选者</button>
    </div>

    <script>
        const logElement = document.getElementById('log');
        const messageInput = document.getElementById('message');
        const localSDPElement = document.getElementById('localSDP');
        const remoteSDPElement = document.getElementById('remoteSDP');
        const iceCandidateElement = document.getElementById('iceCandidate');

        let peerConnection;
        let dataChannel;

        function log(message) {
            logElement.value += message + '\n';
        }

        async function setupConnection() {
            log("正在初始化连接...");
            peerConnection = new RTCPeerConnection({
                iceServers: [] // 使用本地连接，不需要外部 STUN/TURN 服务器
            });

            dataChannel = peerConnection.createDataChannel("chat");
            dataChannel.onopen = () => log("连接已建立，您可以开始发送消息");
            dataChannel.onmessage = (event) => log("对方: " + event.data);

            peerConnection.onicecandidate = (event) => {
                if (event.candidate) {
                    log("候选者生成: " + JSON.stringify(event.candidate));
                }
            };

            const offer = await peerConnection.createOffer();
            await peerConnection.setLocalDescription(offer);
            localSDPElement.value = JSON.stringify(offer);
            log("本地 SDP 已生成，请发送给对方");
        }

        async function setRemoteSDP() {
            const remoteSDP = JSON.parse(remoteSDPElement.value);
            await peerConnection.setRemoteDescription(new RTCSessionDescription(remoteSDP));
            log("远程 SDP 已设置");

            if (remoteSDP.type === 'offer') {
                const answer = await peerConnection.createAnswer();
                await peerConnection.setLocalDescription(answer);
                localSDPElement.value = JSON.stringify(answer);
                log("生成并发送应答 SDP 给对方");
            }
        }

        async function addRemoteCandidate() {
            const candidate = JSON.parse(iceCandidateElement.value);
            await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
            log("远程候选者已添加");
        }

        function copySDP() {
            navigator.clipboard.writeText(localSDPElement.value);
            log("本地 SDP 已复制到剪贴板");
        }

        function sendMessage() {
            const message = messageInput.value;
            if (dataChannel && dataChannel.readyState === "open") {
                dataChannel.send(message);
                log("你: " + message);
                messageInput.value = '';
            } else {
                log("连接未建立，无法发送消息");
            }
        }

        setupConnection();
    </script>
</body>
</html>
